<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item style="width:  240px;margin-bottom:  0;display:block">
        <el-input
          size="small"
          clearable
          placeholder="账户,用户名"
          maxlength="20"
          v-model="input"
          class="input-with-select"
        >
          <el-button slot="prepend" v-on:click="fetchData()" icon="el-icon-search"></el-button>
        </el-input>
        <el-collapse v-model="activeNames" style="display:block;" @change="handleChange">
          <el-collapse-item title="筛选" name="1">
            <p>
              状态：
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="(item,index) in options"
                  :key="index"
                  :label="item.value"
                  :value="item.code"
                ></el-option>
              </el-select>
            </p>
            <p>
              <el-button type="primary" @click="fetchData()">确认</el-button>
              <el-button type="text">重置</el-button>
            </p>
          </el-collapse-item>
        </el-collapse>
      </el-form-item>
    </el-form>

    <el-button type="primary" style="width:200px;" @click="dialogFormVisible = true">新建</el-button>
    <el-table
      border
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%;margin-top:20px"
      @sort-change="sort"
      :header-cell-style="{background:'#ccc'}"
      size="mini"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <!-- <el-table-column label="状态" width="120">
        <template slot-scope="scope">{{ scope }}</template>
      </el-table-column>-->
      <el-table-column prop="statusName" label="状态" width="120"></el-table-column>
      <el-table-column prop="account" label="账号" width="120"></el-table-column>
      <el-table-column prop="nickname" label="用户名" show-overflow-tooltip></el-table-column>
      <el-table-column prop="updateBy" label="修改人" width="120"></el-table-column>
      <el-table-column prop="updateTime" label="修改时间" sortable="custom" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="240">
        <template slot-scope="scope">
          <el-button @click="DetailClick(scope.row)" type="text" size="small">详情</el-button>
          <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
          <el-button
            v-if="scope.row.status == 1"
            @click="update(scope.row)"
            type="text"
            size="small"
          >禁用</el-button>
          <el-button
            v-if="scope.row.status == 2"
            @click="update(scope.row)"
            type="text"
            size="small"
          >启用</el-button>
          <el-button type="text" size="small" @click="Delete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新建弹框 -->
    <el-dialog title="新建后台账户" :visible.sync="dialogFormVisible">
      <el-form :model="dynamicValidateForm" ref label-width="100px" class="demo-dynamic">
        <el-form-item label="使用状态" :label-width="formLabelWidth">
          <el-radio v-model="radio" label="1">启用</el-radio>
          <el-radio v-model="radio" label="2">禁用</el-radio>
        </el-form-item>
        <el-form-item label="账号：" :label-width="formLabelWidth">
          <el-input v-model="dynamicValidateForm.account" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="用户名：" :label-width="formLabelWidth">
          <el-input v-model="dynamicValidateForm.nickname" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="设置密码：" :label-width="formLabelWidth">
          <el-input v-model="dynamicValidateForm.password" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="确认密码：" :label-width="formLabelWidth">
          <el-input v-model="dynamicValidateForm.password" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名：" :label-width="formLabelWidth">
          <el-input v-model="dynamicValidateForm.realName" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="联系方式：" :label-width="formLabelWidth">
          <el-input v-model="dynamicValidateForm.mobile" placeholder="请输入账号"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>

<!-- 详情弹框 -->


<el-dialog
  title="当前详情"
  :visible.sync="DetailBox"
  width="30%">

<el-form ref="form" :model="DetailMsg" label-width="35%">
  <el-form-item height="80px" label="账号:">
    <p style="margin: 0px;">{{ DetailMsg.account }}</p>
  </el-form-item>
  <el-form-item height="80px" label="联系号码:">
    <p style="margin: 0px;">{{DetailMsg.mobile}}</p>
  </el-form-item>
  <el-form-item height="80px" label="用户名:">
    <p style="margin: 0px;">{{DetailMsg.nickname}}</p>
  </el-form-item>
  <el-form-item height="80px" label="真实姓名:">
    <p style="margin: 0px;">{{DetailMsg.realName}}</p>
  </el-form-item>
  <el-form-item height="80px" label="状态:">
    <p style="margin: 0px;">{{DetailMsg.statusName}}</p>
  </el-form-item>
  <el-form-item height="80px" label="修改人:">
    <p style="margin: 0px;">{{DetailMsg.updateBy}}</p>
  </el-form-item>
  <el-form-item height="80px" label="修改时间:">
    <p style="margin: 0px;">{{DetailMsg.updateTime}}</p>
  </el-form-item>
</el-form>
  
</el-dialog>

    <!-- 编辑弹框 -->
    <el-dialog title="修改后台账户" :visible.sync="editFormVisible">
      <el-form :model="editValidateForm" ref label-width="100px" class="demo-dynamic">
        <el-form-item label="使用状态" :label-width="formLabelWidth">
          <el-radio v-model="radio" label="1">启用</el-radio>
          <el-radio v-model="radio" label="2">禁用</el-radio>
        </el-form-item>
        <el-form-item label="账号：" :label-width="formLabelWidth">
          <el-input v-model="editValidateForm.account" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="用户名：" :label-width="formLabelWidth">
          <el-input v-model="editValidateForm.nickname" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名：" :label-width="formLabelWidth">
          <el-input v-model="editValidateForm.realName" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="联系方式：" :label-width="formLabelWidth">
          <el-input v-model="editValidateForm.mobile" placeholder="请输入账号"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit()">确 定</el-button>
      </div>
    </el-dialog>
    <div style="margin-top: 20px">
      <el-button @click="getSelected()">启用</el-button>
      <el-button @click="toggleSelection()">禁用</el-button>
      <el-button @click="Delete(tableData[index])">删除</el-button>
      
       <el-pagination
        style="display: inline-block;
    float: right;"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getList } from "@/api/table";
import {
  adminList,
  adminAdd,
  adminDelete,
  adminUpdate,
  adminStatus,
  updateStatus,
} from "@/api/user";
import qs from "qs";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      DetailMsg:{},
      DetailBox:false,
      pageNum:1,
      total:0,
      pageSize:10,
      activeNames: [""],
      dynamicValidateForm: {
        status: "",
        account: "",
        password: "",
        nickname: "",
        realName: "",
        mobile: ""
      },
      editValidateForm: {
        id: "",
        status: "",
        password: "",
        nickname: "",
        realName: "",
        mobile: ""
      },
      list: null,
      listLoading: true,
      dialogFormVisible: false,
      formLabelWidth: "180px",
      radio: "1",
      input: "",
      labelPosition: "right",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      options: [],//状态
      value: "",
      tableData: [],
      multipleSelection: [],
      currentPage3: 5,
      editFormVisible: false,
      orderType:"1"
    };
  },
  created() {
    this.fetchData();
    this.Startthe()
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    sort(parma){
      console.log(parma.order)
      if(parma.order == "descending"){
        this.orderType = "1"
         this.fetchData();
      }else {
        this.orderType = "2"
         this.fetchData();
      }
    },
    // 详情弹框
    DetailClick(row){
      this.DetailBox = true
      this.DetailMsg = row
    },
    // 启动禁用状态
    Startthe(){
       let data = qs.stringify({
        
      });
      adminStatus(data).then(res => {
        console.log(res.data, "状态");
        if (res.data.code == 200) {
          this.options = res.data.data
          
        } else {
          this.$message.error(res.data.msg);
        }
       
      });
    },
    add() {
      // 添加用户
      this.dynamicValidateForm.status = this.radio;

      adminAdd(qs.stringify(this.dynamicValidateForm)).then(res => {
        console.log(res);
        if(res.data.code == 200){
          this.$message({
            message: '添加成功!',
            type: 'success'
          });
           this.fetchData()
        }else {
           this.$message.error(res.data.msg);
        }
      });
    },
    Delete(row) {
      console.log(row);
      adminDelete(qs.stringify({ ids: row })).then(res => {
        console.log(res);
        if(res.data.code == 200){
          this.$message({
            message: '删除成功!',
            type: 'success'
          });
           this.fetchData()
        }else {
          this.$message.error(res.data.msg);
        }
      });
    },
    update(row) {
      row.status ? 1 : 2;
      var status;
      if (row.status == 1) {
        status = 2;
      }
      if (row.status == 2) {
        status = 1;
      }
      let data = qs.stringify({
        ids: row.id,
        status: status
      });
      updateStatus(data).then(res => {
        console.log(res);
        if(res.data.code == 200){
          this.$message({
            message: '修改成功!',
            type: 'success'
          });
          this.fetchData()
        }else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 编辑
    handleClick(row) {
      this.editFormVisible = true;
      console.log(row);
      this.editValidateForm = row;
    },
    edit() {
      var row = this.editValidateForm;
      let data = qs.stringify({
        id: row.id,
        status: row.status,
        account: row.account,
        nickname: row.nickname,
        realName: row.realName,
        mobile: row.mobile
      });
      adminUpdate(data).then(res => {
         if(res.data.code == 200){
          this.$message({
            message: '修改成功!',
            type: 'success'
          });
          this.fetchData()
          this.editFormVisible = false
        }else {
          this.$message.error(res.data.msg);
        }
      });
    },
    fetchData() {
      this.listLoading = true;
      console.log(this.total)
      let data = qs.stringify({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        keyword: this.input,
        status: this.value,
        orderType: this.orderType
      });
     
      adminList(data).then(response => {
        this.tableData = response.data.data;
        this.total = response.data.count
        
        this.listLoading = false;
      });
      // 获取状态列表
      adminStatus().then(res => {
        console.log(res);
        this.options = res.data.data;
      });
    },
    toggleSelection(rows) {
      if(this.multipleSelection.length !== 0){
        var ids = '';
        for(let i = 0; i < this.multipleSelection.length; i++){
          ids += this.multipleSelection[i].id + ","
        }
        
        console.log(ids)
        
        let data = qs.stringify({
          ids: ids,
          status: "2"
        });

      updateStatus(data).then(res => {
        console.log(res);
        if(res.data.code == 200){
          this.$message({
            message: '禁用成功!',
            type: 'success'
          });
          this.fetchData()
        }else {
          this.$message.error(res.data.msg);
        }
      });
      }else {
         this.$message.error("至少选择一条!");
         return false
      }
      
    },
    getSelected() {
      console.info(this.multipleSelection);
      // console.info(this.$refs.multipleTable.tableData);
      // console.info(this.$refs.multipleTable);
      if(this.multipleSelection.length !== 0){
        var ids = '';
        for(let i = 0; i < this.multipleSelection.length; i++){
          ids += this.multipleSelection[i].id + ","
        }
        
        console.log(ids)
        
        let data = qs.stringify({
          ids: ids,
          status: "1"
        });

      updateStatus(data).then(res => {
        console.log(res);
        if(res.data.code == 200){
          this.$message({
            message: '启用成功!',
            type: 'success'
          });
          this.fetchData()
        }else {
          this.$message.error(res.data.msg);
        }
      });
      }else {
         this.$message.error("至少选择一条!");
         return false
      }
      
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`);
    //   this.pageNum = val
    //   this.fetchData()
    // },
    handleCurrentChange(val) {
      this.pageNum = val
      this.fetchData()
    }
  }
};
</script>

<style lang="less" scoped>
</style>